<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游日志 - 个性化旅游系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            min-height: 100vh;
        }
        .header {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-title {
            font-size: 28px;
            font-weight: bold;
        }
        .header-nav {
            display: flex;
            gap: 20px;
            align-items: center;
        }
        .nav-button {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 5px;
            text-decoration: none;
            transition: all 0.3s;
        }
        .nav-button:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-1px);
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 20px;
        }
        .search-section {
            background: white;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .search-title {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .search-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        .control-group {
            display: flex;
            flex-direction: column;
        }
        .control-label {
            font-weight: bold;
            margin-bottom: 8px;
            color: #34495e;
        }
        .search-type-buttons {
            display: flex;
            gap: 10px;
        }
        .type-button {
            flex: 1;
            padding: 10px;
            border: 2px solid #e0e0e0;
            background: white;
            color: #666;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        .type-button.active {
            border-color: #2ecc71;
            background: #2ecc71;
            color: white;
        }
        .sort-buttons {
            display: flex;
            gap: 10px;
        }
        .sort-button {
            flex: 1;
            padding: 8px;
            border: 2px solid #e0e0e0;
            background: white;
            color: #666;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 12px;
        }
        .sort-button.active {
            border-color: #e74c3c;
            background: #e74c3c;
            color: white;
        }
        .search-input-container {
            grid-column: 1 / -1;
            display: flex;
            gap: 10px;
        }
        .search-input {
            flex: 1;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
        }
        .search-input:focus {
            border-color: #2ecc71;
        }
        .search-button, .recommend-button {
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
        }
        .search-button {
            background: #2ecc71;
            color: white;
        }
        .search-button:hover {
            background: #27ae60;
            transform: translateY(-1px);
        }
        .recommend-button {
            background: #f39c12;
            color: white;
        }
        .recommend-button:hover {
            background: #d68910;
            transform: translateY(-1px);
        }
        .results-section {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #ecf0f1;
        }
        .results-title {
            font-size: 18px;
            color: #2c3e50;
        }
        .results-count {
            color: #7f8c8d;
            font-size: 14px;
        }
        .diary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
        }
        .diary-card {
            background: white;
            border: 1px solid #e1e8ed;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
        }
        .diary-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            border-color: #2ecc71;
        }
        .diary-card-header {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
        }
        .diary-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
            line-height: 1.3;
        }
        .diary-destination {
            color: #e74c3c;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .diary-card-body {
            padding: 15px 20px;
        }
        .diary-preview {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
            height: 60px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .diary-card-footer {
            padding: 15px 20px;
            background: #f8f9fa;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        .diary-stats {
            display: flex;
            gap: 15px;
        }
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .diary-date {
            color: #999;
        }
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        .loading i {
            font-size: 30px;
            margin-bottom: 10px;
            color: #2ecc71;
        }
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        .empty-state i {
            font-size: 60px;
            margin-bottom: 20px;
            color: #ddd;
        }
        .empty-state h3 {
            margin-bottom: 10px;
            color: #666;
        }
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }
        .modal.show {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            background: white;
            max-width: 90%;
            max-height: 90%;
            overflow-y: auto;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transform: scale(0.8);
            transition: transform 0.3s;
        }
        .modal.show .modal-content {
            transform: scale(1);
        }
        .modal-header {
            padding: 25px 30px;
            border-bottom: 1px solid #e1e8ed;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .modal-title {
            font-size: 24px;
            color: #2c3e50;
            margin: 0;
            line-height: 1.3;
            max-width: 80%;
        }
        .close-button {
            background: #f1f1f1;
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            cursor: pointer;
            font-size: 18px;
            color: #666;
            transition: all 0.3s;
        }
        .close-button:hover {
            background: #e0e0e0;
            transform: rotate(90deg);
        }
        .modal-body {
            padding: 30px;
        }
        .diary-meta {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
        }
        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
            font-size: 14px;
        }
        .diary-content {
            line-height: 1.8;
            color: #333;
            font-size: 16px;
            word-break: break-word;
        }
        .modal-footer {
            padding: 20px 30px;
            border-top: 1px solid #e1e8ed;
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        .action-button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .rate-button {
            background: #f1c40f;
            color: white;
        }
        .rate-button:hover {
            background: #f39c12;
            transform: translateY(-1px);
        }
        .close-modal-button {
            background: #95a5a6;
            color: white;
        }
        .close-modal-button:hover {
            background: #7f8c8d;
            transform: translateY(-1px);
        }
        
        /* 分页控件样式 */
        .pagination-container {
            margin-top: 30px;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .pagination-info {
            text-align: center;
            margin-bottom: 15px;
            color: #666;
            font-size: 14px;
        }
        
        .pagination-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .pagination-btn {
            background: #fff;
            border: 2px solid #e0e0e0;
            color: #666;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .pagination-btn:hover:not(:disabled) {
            border-color: #2ecc71;
            color: #2ecc71;
            transform: translateY(-1px);
        }
        
        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .page-numbers {
            display: flex;
            gap: 5px;
        }
        
        .page-number {
            background: #fff;
            border: 2px solid #e0e0e0;
            color: #666;
            padding: 8px 12px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            min-width: 40px;
            text-align: center;
        }
        
        .page-number:hover {
            border-color: #2ecc71;
            color: #2ecc71;
        }
        
        .page-number.active {
            background: #2ecc71;
            border-color: #2ecc71;
            color: white;
        }
        
        .page-ellipsis {
            padding: 8px 4px;
            color: #999;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .search-controls {
                grid-template-columns: 1fr;
            }
            .diary-grid {
                grid-template-columns: 1fr;
            }
            .header-content {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            .modal-content {
                max-width: 95%;
                margin: 20px;
            }
            .modal-header {
                padding: 20px;
            }
            .modal-body {
                padding: 20px;
            }
            .diary-meta {
                flex-direction: column;
            }
            .pagination-controls {
                flex-direction: column;
                gap: 15px;
            }
            .page-numbers {
                order: -1;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-content">
            <h1 class="header-title">
                <i class="fas fa-book-open"></i> 旅游日志
            </h1>
            <div class="header-nav">
                <a href="dashboard.html" class="nav-button">
                    <i class="fas fa-home"></i> 返回首页
                </a>
                <a href="post.html" class="nav-button">
                    <i class="fas fa-plus"></i> 写日志
                </a>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- 搜索区域 -->
        <div class="search-section">
            <h2 class="search-title">
                <i class="fas fa-search"></i> 发现精彩日志
            </h2>
            
            <div class="search-controls">
                <div class="control-group">
                    <label class="control-label">搜索类型</label>
                    <div class="search-type-buttons">
                        <button class="type-button active" data-type="text">
                            <i class="fas fa-search"></i> 全文搜索
                        </button>
                        <button class="type-button" data-type="destination">
                            <i class="fas fa-map-marker-alt"></i> 按目的地
                        </button>
                    </div>
                </div>
                
                <div class="control-group">
                    <label class="control-label">排序方式</label>
                    <div class="sort-buttons">
                        <button class="sort-button active" data-sort="heat">
                            <i class="fas fa-fire"></i> 热度
                        </button>
                        <button class="sort-button" data-sort="rating">
                            <i class="fas fa-star"></i> 评分
                        </button>
                        <button class="sort-button" data-sort="time">
                            <i class="fas fa-clock"></i> 时间
                        </button>
                    </div>
                </div>
                
                <div class="search-input-container">
                    <input type="text" class="search-input" id="searchInput" placeholder="输入关键词搜索精彩的旅游日志...">
                    <button class="search-button" onclick="performSearch()">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                    <button class="recommend-button" onclick="loadRecommendations()">
                        <i class="fas fa-magic"></i> 智能推荐
                    </button>
                </div>
            </div>
        </div>

        <!-- 结果区域 -->
        <div class="results-section">
            <div class="results-header">
                <h3 class="results-title">浏览日志</h3>
                <span class="results-count" id="resultsCount">请搜索或获取推荐</span>
            </div>
            
            <div id="resultsContainer">
                <div class="empty-state">
                    <i class="fas fa-book-open"></i>
                    <h3>发现精彩旅程</h3>
                    <p>使用上方的搜索功能或点击"智能推荐"来发现其他旅行者的精彩故事</p>
                </div>
            </div>
            
            <!-- 分页控件 -->
            <div class="pagination-container" id="paginationContainer" style="display: none;">
                <div class="pagination-info">
                    <span id="paginationInfo"></span>
                </div>
                <div class="pagination-controls">
                    <button class="pagination-btn" id="prevPageBtn" onclick="goToPage(currentPage - 1)">
                        <i class="fas fa-chevron-left"></i> 上一页
                    </button>
                    <div class="page-numbers" id="pageNumbers"></div>
                    <button class="pagination-btn" id="nextPageBtn" onclick="goToPage(currentPage + 1)">
                        下一页 <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 日志详情模态框 -->
    <div class="modal" id="diaryModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="modalTitle">日志标题</h2>
                <button class="close-button" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="diary-meta" id="modalMeta">
                    <!-- 日志元信息 -->
                </div>
                <div class="diary-content" id="modalContent">
                    <!-- 日志内容 -->
                </div>
            </div>
            <div class="modal-footer">
                <button class="action-button rate-button" onclick="showRatingModal()">
                    <i class="fas fa-star"></i> 评价此日志
                </button>
                <button class="action-button close-modal-button" onclick="closeModal()">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentSearchType = 'text';
        let currentSortType = 'heat';
        let currentDiaryId = null;
        let allDiaries = [];
        let currentPage = 1;
        let pageSize = 9;
        let totalPages = 1;
        let currentKeyword = '';
        let paginationInfo = null;

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeButtons();
            loadRecommendations(); // 默认加载推荐内容
        });

        // 初始化按钮事件
        function initializeButtons() {
            // 搜索类型按钮
            document.querySelectorAll('.type-button').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.type-button').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    currentSearchType = this.dataset.type;
                    updateSearchPlaceholder();
                });
            });

            // 排序按钮
            document.querySelectorAll('.sort-button').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.sort-button').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    currentSortType = this.dataset.sort;
                    
                    // 重置分页并重新加载数据
                    currentPage = 1;
                    if (currentKeyword) {
                        performSearch(1);
                    } else {
                        loadRecommendations(1);
                    }
                });
            });

            // 搜索框回车事件
            document.getElementById('searchInput').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });
        }

        // 更新搜索框占位符
        function updateSearchPlaceholder() {
            const input = document.getElementById('searchInput');
            if (currentSearchType === 'text') {
                input.placeholder = '输入关键词搜索精彩的旅游日志...';
            } else {
                input.placeholder = '输入目的地名称搜索相关日志...';
            }
        }

        // 执行搜索
        function performSearch(page = 1) {
            const keyword = document.getElementById('searchInput').value.trim();
            if (!keyword) {
                alert('请输入搜索关键词');
                return;
            }

            currentKeyword = keyword;
            currentPage = page;
            showLoading();

            let apiUrl;
            if (currentSearchType === 'text') {
                apiUrl = `/api/diary/search/text/${encodeURIComponent(keyword)}`;
            } else {
                apiUrl = `/api/diary/search/destination/${encodeURIComponent(keyword)}`;
            }

            // 添加查询参数
            const params = new URLSearchParams({
                sortBy: currentSortType,
                page: currentPage,
                pageSize: pageSize
            });
            apiUrl += `?${params.toString()}`;

            fetch(apiUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('搜索失败');
                    }
                    return response.json();
                })
                .then(data => {
                    allDiaries = data.diaries || [];
                    paginationInfo = data.pagination || {};
                    totalPages = paginationInfo.totalPages || 1;
                    displayResults(allDiaries, `搜索"${keyword}"的结果`);
                    updatePagination();
                })
                .catch(error => {
                    console.error('搜索失败:', error);
                    showError('搜索失败，请稍后重试');
                });
        }

        // 加载推荐日志
        function loadRecommendations(page = 1) {
            showLoading();
            
            currentKeyword = ''; // 清空搜索关键词
            currentPage = page;

            const userId = 1; // TODO: 从实际登录状态获取
            
            // 添加查询参数
            const params = new URLSearchParams({
                sortBy: currentSortType,
                page: currentPage,
                pageSize: pageSize
            });
            const apiUrl = `/api/diary/recommend/${userId}?${params.toString()}`;

            fetch(apiUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取推荐失败');
                    }
                    return response.json();
                })
                .then(data => {
                    allDiaries = data.diaries || [];
                    paginationInfo = data.pagination || {};
                    totalPages = paginationInfo.totalPages || 1;
                    displayResults(allDiaries, '为您推荐的精彩日志');
                    updatePagination();
                })
                .catch(error => {
                    console.error('获取推荐失败:', error);
                    showError('获取推荐失败，请稍后重试');
                });
        }

        // 显示加载状态
        function showLoading() {
            document.getElementById('resultsContainer').innerHTML = `
                <div class="loading">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>正在加载...</p>
                </div>
            `;
            document.getElementById('resultsCount').textContent = '加载中...';
        }

        // 显示错误
        function showError(message) {
            document.getElementById('resultsContainer').innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h3>出错了</h3>
                    <p>${message}</p>
                </div>
            `;
            document.getElementById('resultsCount').textContent = '加载失败';
        }

        // 显示结果
        function displayResults(diaries, title) {
            const container = document.getElementById('resultsContainer');
            const countElement = document.getElementById('resultsCount');

            if (!diaries || diaries.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-search"></i>
                        <h3>未找到相关日志</h3>
                        <p>试试调整搜索关键词或查看推荐内容</p>
                    </div>
                `;
                countElement.textContent = '未找到结果';
                return;
            }

            countElement.textContent = `找到 ${diaries.length} 篇日志`;

            const grid = document.createElement('div');
            grid.className = 'diary-grid';

            diaries.forEach(diary => {
                const card = createDiaryCard(diary);
                grid.appendChild(card);
            });

            container.innerHTML = '';
            container.appendChild(grid);
        }

        // 创建日志卡片
        function createDiaryCard(diary) {
            const card = document.createElement('div');
            card.className = 'diary-card';
            card.onclick = () => showDiaryDetail(diary.diary_id);

            // 处理内容预览
            const textContent = diary.content ? diary.content.replace(/<[^>]*>/g, '') : '';
            const preview = textContent.length > 100 ? textContent.substring(0, 100) + '...' : textContent;

            // 处理日期
            const date = new Date(diary.created_at);
            const dateStr = date.toLocaleDateString('zh-CN');

            card.innerHTML = `
                <div class="diary-card-header">
                    <h3 class="diary-title">${diary.title}</h3>
                    <div class="diary-destination">
                        <i class="fas fa-map-marker-alt"></i>
                        ${diary.destination || '未知目的地'}
                    </div>
                    <div style="margin-top: 8px; color: #666; font-size: 12px;">
                        <i class="fas fa-user"></i>
                        作者：${diary.username || '未知用户'}
                    </div>
                </div>
                <div class="diary-card-body">
                    <p class="diary-preview">${preview}</p>
                </div>
                <div class="diary-card-footer">
                    <div class="diary-stats">
                        <div class="stat-item">
                            <i class="fas fa-eye"></i>
                            <span>${diary.views || 0}</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-star"></i>
                            <span>${diary.average_rating ? parseFloat(diary.average_rating).toFixed(1) : 'N/A'}</span>
                        </div>
                    </div>
                    <div class="diary-date">${dateStr}</div>
                </div>
            `;

            return card;
        }

        // 显示日志详情
        function showDiaryDetail(diaryId) {
            currentDiaryId = diaryId;

            fetch(`/api/diary/${diaryId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取日志详情失败');
                    }
                    return response.json();
                })
                .then(diary => {
                    displayDiaryModal(diary);
                })
                .catch(error => {
                    console.error('获取日志详情失败:', error);
                    alert('获取日志详情失败，请重试');
                });
        }

        // 显示日志模态框
        function displayDiaryModal(diary) {
            const modal = document.getElementById('diaryModal');
            const title = document.getElementById('modalTitle');
            const meta = document.getElementById('modalMeta');
            const content = document.getElementById('modalContent');

            title.textContent = diary.title;

            const date = new Date(diary.created_at);
            const dateStr = date.toLocaleDateString('zh-CN');

            meta.innerHTML = `
                <div class="meta-item">
                    <i class="fas fa-user"></i>
                    <span>作者：${diary.username || '未知用户'}</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>${diary.destination || '未知目的地'}</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-calendar"></i>
                    <span>${dateStr}</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-eye"></i>
                    <span>${diary.views} 次浏览</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-star"></i>
                    <span>${diary.average_rating ? parseFloat(diary.average_rating).toFixed(1) : 'N/A'} 分</span>
                </div>
            `;

            content.innerHTML = diary.content;

            modal.classList.add('show');
        }

        // 关闭模态框
        function closeModal() {
            const modal = document.getElementById('diaryModal');
            modal.classList.remove('show');
            currentDiaryId = null;
        }

        // 显示评分模态框
        function showRatingModal() {
            if (!currentDiaryId) return;

            // 创建评分模态框
            const ratingModal = document.createElement('div');
            ratingModal.className = 'modal show';
            ratingModal.innerHTML = `
                <div class="modal-content" style="max-width: 400px;">
                    <div class="modal-header">
                        <h3 class="modal-title">为此日志评分</h3>
                        <button class="close-button" onclick="closeRatingModal()">&times;</button>
                    </div>
                    <div class="modal-body" style="text-align: center; padding: 40px;">
                        <div style="margin-bottom: 30px;">
                            <div class="rating-stars" style="font-size: 40px; color: #ddd;">
                                <i class="fas fa-star" data-rating="1" style="margin: 0 5px; cursor: pointer;"></i>
                                <i class="fas fa-star" data-rating="2" style="margin: 0 5px; cursor: pointer;"></i>
                                <i class="fas fa-star" data-rating="3" style="margin: 0 5px; cursor: pointer;"></i>
                                <i class="fas fa-star" data-rating="4" style="margin: 0 5px; cursor: pointer;"></i>
                                <i class="fas fa-star" data-rating="5" style="margin: 0 5px; cursor: pointer;"></i>
                            </div>
                            <p style="margin-top: 15px; color: #666;">点击星星进行评分</p>
                        </div>
                        <div>
                            <button class="action-button rate-button" id="submitRating" disabled>
                                提交评分
                            </button>
                            <button class="action-button close-modal-button" onclick="closeRatingModal()">
                                取消
                            </button>
                        </div>
                    </div>
                </div>
            `;

            document.body.appendChild(ratingModal);

            // 初始化评分交互
            initializeRating(ratingModal);
        }

        // 初始化评分交互
        function initializeRating(modal) {
            const stars = modal.querySelectorAll('.rating-stars i');
            const submitButton = modal.querySelector('#submitRating');
            let selectedRating = 0;

            stars.forEach(star => {
                star.addEventListener('mouseover', function() {
                    const rating = parseInt(this.dataset.rating);
                    highlightStars(stars, rating);
                });

                star.addEventListener('mouseout', function() {
                    highlightStars(stars, selectedRating);
                });

                star.addEventListener('click', function() {
                    selectedRating = parseInt(this.dataset.rating);
                    highlightStars(stars, selectedRating);
                    submitButton.disabled = false;
                });
            });

            submitButton.addEventListener('click', function() {
                if (selectedRating > 0) {
                    submitRating(selectedRating);
                }
            });
        }

        // 高亮星星
        function highlightStars(stars, rating) {
            stars.forEach((star, index) => {
                if (index < rating) {
                    star.style.color = '#f1c40f';
                } else {
                    star.style.color = '#ddd';
                }
            });
        }

        // 提交评分
        function submitRating(rating) {
            fetch(`/api/diary/${currentDiaryId}/rate`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    user_id: 1, // TODO: 从实际登录状态获取
                    rating: rating
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('评分失败');
                }
                closeRatingModal();
                alert('评分成功，感谢您的反馈！');
            })
            .catch(error => {
                console.error('评分失败:', error);
                alert('评分失败，请稍后重试');
            });
        }

        // 关闭评分模态框
        function closeRatingModal() {
            const ratingModals = document.querySelectorAll('.modal:not(#diaryModal)');
            ratingModals.forEach(modal => {
                document.body.removeChild(modal);
            });
        }

        // 点击模态框背景关闭
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('modal')) {
                if (e.target.id === 'diaryModal') {
                    closeModal();
                } else {
                    closeRatingModal();
                }
            }
        });
        
        // 分页相关函数
        function updatePagination() {
            const container = document.getElementById('paginationContainer');
            const infoElement = document.getElementById('paginationInfo');
            const prevBtn = document.getElementById('prevPageBtn');
            const nextBtn = document.getElementById('nextPageBtn');
            const pageNumbers = document.getElementById('pageNumbers');
            
            if (!paginationInfo || totalPages <= 1) {
                container.style.display = 'none';
                return;
            }
            
            container.style.display = 'block';
            
            // 更新分页信息
            const startItem = (currentPage - 1) * pageSize + 1;
            const endItem = Math.min(currentPage * pageSize, paginationInfo.totalCount);
            infoElement.textContent = `显示第 ${startItem}-${endItem} 条，共 ${paginationInfo.totalCount} 条记录`;
            
            // 更新按钮状态
            prevBtn.disabled = !paginationInfo.hasPrevPage;
            nextBtn.disabled = !paginationInfo.hasNextPage;
            
            // 生成页码
            generatePageNumbers(pageNumbers);
        }
        
        function generatePageNumbers(container) {
            container.innerHTML = '';
            
            const maxVisiblePages = 5;
            let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
            let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
            
            // 调整起始页
            if (endPage - startPage + 1 < maxVisiblePages) {
                startPage = Math.max(1, endPage - maxVisiblePages + 1);
            }
            
            // 第一页
            if (startPage > 1) {
                addPageNumber(container, 1);
                if (startPage > 2) {
                    addEllipsis(container);
                }
            }
            
            // 中间页码
            for (let i = startPage; i <= endPage; i++) {
                addPageNumber(container, i);
            }
            
            // 最后一页
            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    addEllipsis(container);
                }
                addPageNumber(container, totalPages);
            }
        }
        
        function addPageNumber(container, pageNum) {
            const pageElement = document.createElement('span');
            pageElement.className = `page-number ${pageNum === currentPage ? 'active' : ''}`;
            pageElement.textContent = pageNum;
            pageElement.onclick = () => goToPage(pageNum);
            container.appendChild(pageElement);
        }
        
        function addEllipsis(container) {
            const ellipsis = document.createElement('span');
            ellipsis.className = 'page-ellipsis';
            ellipsis.textContent = '...';
            container.appendChild(ellipsis);
        }
        
        function goToPage(page) {
            if (page < 1 || page > totalPages || page === currentPage) {
                return;
            }
            
            if (currentKeyword) {
                performSearch(page);
            } else {
                loadRecommendations(page);
            }
        }
        
        function resetPagination() {
            currentPage = 1;
            totalPages = 1;
            paginationInfo = null;
            document.getElementById('paginationContainer').style.display = 'none';
        }
    </script>
</body>
</html> 